<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse">
        <div v-for="(menuItem,index) in menuList" :key="index">
          <el-submenu :index="menuItem.id" v-if="menuItem.children&&menuItem.children.length>0">
            <template slot="title">
              <i :class="menuItem.iconPath"></i>
              <span v-if="!isCollapse">{{menuItem.name||''}}</span>
            </template>
            <el-menu-item-group>
              <router-link
                v-for="(childItem,index) in menuItem.children"
                :to="childItem.path"
                :key="index"
              >
                <el-menu-item :index="childItem.id">
                  <i :class="childItem.iconPath"></i>
                  <span>{{childItem.name}}</span>
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <router-link :to="menuItem.path" v-if="menuItem.children&&menuItem.children.length===0">
            <el-menu-item :index="menuItem.id">
              <i :class="menuItem.iconPath"></i>
              <span slot="title">{{menuItem.name||''}}</span>
            </el-menu-item>
          </router-link>
        </div>
        <!-- <router-link to="/account/grid">
            <el-menu-item index="3">
              <i class="el-icon-menu"></i>
              <span slot="title">会员中心</span>
            </el-menu-item>
          </router-link>
          <el-menu-item index="4">
            <i class="el-icon-goods"></i>
            <span slot="title">商品管理</span>
        </el-menu-item>-->
      </el-menu>
    </el-col>
  </el-row>
</template>
<script>
/**
 * @param {Array} menuList
 * @prop  {String} path
 * @prop  {String} id
 * @prop  {String} iconPath
 * @prop  {String} name
 * @prop  {Array} Children
 */
export default {
  props: {
    menuList: {
      type: Array
    },
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
.el-menu {
  border: none;
}
</style>